<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="home-navigator">
		<view @click="goNavigate(item)" hover-class="navigator-hover" class="list-item" v-for="(item, index) in list"
			:key="index">

			<image :src="item.pic" mode="" :class="{ disabled: item.disabled }"></image>
			<view class="label">
				{{ item.label }}
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	data() {
		return {
			list: [{
				label: '社区调查',
				pic: '../../static/icon/yanshou.png',
				navigateTo: '/activity/questionnaireList/questionnaireList',
			},
			{
				label: '社区投票',
				pic: '../../static/icon/jilu.png',
				navigateTo: '/activity/voteList/voteList',
			},
			{
				label: '投票选举',
				pic: '../../static/icon/jilu.png',
				navigateTo: '/vote/index/index',
			},
			]
		}
	},
	computed: {
		...mapState(['fontSize'])
	},
	methods: {
		goNavigate(item) {
			if (item.disabled) {
				return
			}
			if (!uni.getStorageSync('userInfo')) {
				uni.showModal({
					title: '您还未登陆,请先登陆后使用',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login'
							})
						}
					}
				})
				return
			}
			if (uni.getStorageSync('userInfo').checkStatus != 2) {
				uni.showModal({
					title: '您的审批暂未通过，无法使用此功能'
				})
			} else {
				console.log(item.navigateTo)
				uni.navigateTo({
					url: item.navigateTo
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.home-navigator {
	display: grid;
	grid-template-columns: repeat(5, 20%);
	padding: 32rpx 0;
	grid-row-gap: 32rpx;
	font-size: 28rpx;
	color: #333333;

	.list-item {
		text-align: center;

		image {
			width: 74rpx;
			height: 74rpx;
		}

		image.disabled {
			filter: grayscale(100%);
		}
	}
}
</style>
